<template>
    <div style="width: 100%;">
        <ElInput :modelValue="props.modelValue" :="$attrs" style="width: 100%;" />
        <div>
            <ElButton link type="primary" @click="onHalf">二人分摊</ElButton>
            <ElButton link type="primary" @click="onHalfHalf">四人分摊</ElButton>
            <ElButton link type="primary" @click="onClear">清空</ElButton>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElInput, ElButton } from 'element-plus'
interface Props {
    modelValue: string;
    data: object;
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    data: () => ({}),
})
const emit = defineEmits()

const onHalf = () => {
    const value = +props.modelValue / 2
    emit('update:modelValue', `${value || 0}`)
}

const onHalfHalf = () => {
    const value = +props.modelValue / 4
    emit('update:modelValue', `${value || 0}`)
}

const onClear = () => {
    emit('update:modelValue', ``)
}
</script>